<!doctype html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>文字回复列表</title>
    <meta name="description" content="文字列表">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="icon" type="image/png" href="__PUBLIC__/assets/i/favicon.png">
    <link rel="apple-touch-icon-precomposed" href="__PUBLIC__/assets/i/app-icon72x72@2x.png">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <link rel="stylesheet" href="__PUBLIC__/assets/css/amazeui.min.css"/>
    <link rel="stylesheet" href="__PUBLIC__/assets/css/admin.css">
    <link rel="stylesheet" href="__PUBLIC__/assets/css/app.css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/uploadify/uploadify.css" />  
</head>

<body data-type="generalComponents">

    <include file = "./Application/Admin/View/header.html"/>

<div class="tpl-page-container tpl-page-header-fixed" id="basic_list_info">

    <include file = "./Application/Admin/View/menu.html"/>
    <include file = "./Public/common/htm/loading.html"/>

    <div class="tpl-content-wrapper">
        <div class="tpl-content-page-title">
            文字回复列表{$basic_info}
        </div>
        <ol class="am-breadcrumb">
            <li><a href="#" class="am-icon-home" >首页</a></li>
            <li><a href="#">微信</a></li>
            <li class="am-active">文字回复列表</li>
        </ol>
        <div class="tpl-portlet-components">
            <div class="portlet-title">
                <div class="caption font-green bold">
                    <span class="am-icon-code"></span> 列表
                    <!--<input id="upload_button" type="file" multiple="true" value="" />  -->

                </div>
                
                <!--<div class="tpl-portlet-input tpl-fz-ml">-->
                <!--<div class="portlet-input input-small input-inline">-->
                <!--<div class="input-icon right">-->
                <!--<i class="am-icon-search"></i>-->
                <!--<input type="text" class="form-control form-control-solid" placeholder="搜索..."></div>-->
                <!--</div>-->
                <!--</div>-->


            </div>
          
            <div class="tpl-block">

                <div class="am-u-sm-12 am-u-md-6">
                    <div class="am-btn-toolbar">
                        <div class="am-btn-group am-btn-group-xs">
                            <button type="button" @click="basic_add" class="am-btn am-btn-default am-btn-success"><span class="am-icon-plus"></span> 新增</button>
                        </div>
                    </div>
                </div>


                <div class="am-u-sm-12 am-u-md-3">
                    <div class="am-input-group am-input-group-sm">
                        <input type="text" class="am-form-field" placeholder="规则名称" name="rule_name" id="rule_name">
                        <span class="am-input-group-btn">
            <button class="am-btn  am-btn-default am-btn-success tpl-am-btn-success am-icon-search"
                    type="button" @click="search_data"></button>
          </span>
                    </div>
                </div>
            </div>
            <div class="am-g">
                <div class="am-u-sm-12">
                    <form class="am-form">
                        <table class="am-table am-table-striped am-table-hover table-main">
                            <thead>
                            <tr>
                                <!--<th class="table-id">ID</th>-->
                                <th class="table-title" style="width:20%;">规则名称</th>
                                <th class="table-type" style="width:50%;">关键字</th>
                                <th class="table-type" style="width:10%;">状态</th>
                                <th class="table-set" style="width:20%;">操作</th>
                            </tr>
                            </thead>
                            <tbody>


                            <tr v-for="basic in basicinfo">
                                <!--<td>1</td>-->
                                <td>{{basic.rule.rule_name}}</td>
                                <td>{{basic.rule.rule_keywords}}</td>
                                <td>{{basic.rule.rule_status}}</td>
                                <td>
                                    <div class="am-btn-toolbar">
                                        <div class="am-btn-group am-btn-group-xs">
                                            <button class="am-btn am-btn-default am-btn-xs am-text-secondary"
                                                    type="button"
                                                    @click="basic_edit"
                                                    :rule_id="basic.rule_id"
                                            ><span
                                                    class="am-icon-pencil-square-o" :rule_id="basic.rule_id"></span> 编辑
                                            </button>
                                            <button class="am-btn am-btn-default am-btn-xs am-text-danger am-hide-sm-only"
                                                    type="button"
                                                    @click="rm_data" :rule_id="basic.rule_id">
                                                <span class="am-icon-trash-o" :rule_id="basic.rule_id"></span> 删除
                                            </button>
                                        </div>
                                    </div>
                                </td>
                            </tr>


                            </tbody>
                        </table>
                        <div class="am-cf">

                            <div class="am-fr">
                                <ul class="am-pagination tpl-pagination">

                                    <li @click="pre_page"><a>«</a>
                                    </li>

                                    <!--<li class="am-active"><a href="#">1</a></li>-->
                                    <li v-for="i in max_page" :id="i">
                                        <a @click="modify_page" :page="i" style="background-color: #0e90d2"
                                           v-if="i==current_page">{{i}}</a>
                                        <a @click="modify_page" :page="i" v-else>{{i}}</a>
                                    </li>


                                    <li><a @click="next_page">»</a></li>

                                </ul>
                            </div>
                        </div>
                        <hr>

                    </form>
                </div>

            </div>
        </div>
        <div class="tpl-alert"></div>

    </div>


</div>

</div>
</body>


<script src="__PUBLIC__/assets/js/jquery.min.js"></script>
<script src="__PUBLIC__/assets/js/amazeui.min.js"></script>
<script src="__PUBLIC__/assets/js/app.js"></script>
<script src="__PUBLIC__/vue.js"></script>
<script src="__PUBLIC__/uploadify/jquery.uploadify.min.js"></script>  
<script>
    var vm = new Vue({
        el: '#basic_list_info',
        data: {
            users: [],
            groups: [],
            basicinfo : [],
            max_page: 0,
            current_page: 1,
        },
        methods: {
            load_data:function(page){
                $("#loading_modal").find("#title_index").html("正在加载..."); 
                $("#loading_modal").modal({closeViaDimmer:0});
                var ruleName = $('#rule_name').val();
                $.ajax({
                    type: 'POST',
                    url: '../MessageReplyApi/basic_list',
                    dataType: 'json',
                    data: {
                        page: page,
                        rule_name: ruleName
                    },
                    success: function (data) {
                        
                        $("#loading_modal").modal('close');
                        console.log(data.data);
                        if (data.stateCode == 200) {
                            vm.basicinfo = data.data.records;
                            vm.max_page = data.data.max_page;
                            vm.current_page = page;
                        }
                    },
                    error: function (data) {
                        $("#loading_modal").modal('close');
                        console.log('error');
                    }
                })

            },
            rm_data: function (event) {
                var tarView = event.target;
                var rule_id = tarView.getAttribute('rule_id');
                $.ajax({
                    type: 'get',
                    url: '../MessageReplyApi/basic_remove',
                    dataType: 'json',
                    data: {rule_id:rule_id},
                    success: function (data) {
                        console.log(data.data);
                        vm.load_data(vm.current_page);
                    },
                    error: function (data) {
                        console.log('error');
                    }
                })
            },
            search_data: function (event) {
                vm.load_data(1);
            },
            modify_page: function (event) {
                var tarView = event.target;
                var page = tarView.getAttribute('page');
                this.load_users(page);
            },
            pre_page: function (event) {
                var pre_page = this.current_page - 1;
                if (pre_page > 0) {
                    this.load_users(pre_page);
                }
            },
            next_page: function (event) {
                var next_page = this.current_page + 1;
                if (next_page <= this.max_page) {
                    this.load_users(next_page);
                }
            },
            basic_add: function(event) {
                window.location = "{:U('MessageReply/basic_add')}";
            },
            basic_edit: function(event) {
                var targetView = event.target;
                var rule_id = targetView.getAttribute('rule_id');
                window.location = "{:U('MessageReply/basic_edit')}?rule_id="+rule_id;
            }
        },
    })

    $(document).ready(function () {
        vm.load_data(vm.current_page);

        $('#upload_button').uploadify({  
            'swf'      : '__PUBLIC__/uploadify/uploadify.swf',  
            'uploader' : '{:U("Upload/Upload/uploadMultiFile")}',//这个就是处理上传文件的地址  
            'buttonText' : '上传照片',  
            'multi'    : true,//多张图片上传flag  true 为允许，false为禁止
            'onUploadSuccess' : function(file, data, response) {  
                console.log(data);
                debugger;
                data.trim();//这个是文件在服务器上的路径，如果是图片，可以使用src 
            }  
        });  
    })

</script>


</html>